<script setup lang="ts">
let currentLink: any = {};

const listViewData = [
    {
        id: '1',
        name: '全部',
        type: 'link',
        url: 'all',
        unreadnumber: 12
    },
    {
        id: '2',
        name: '采购管理',
        type: 'link',
        unreadnumber: 9,
        url: 'manage',
        active: 'true'
    },
    {
        id: '3',
        name: '应付',
        type: 'link',
        url: 'copy-with'
    },
    {
        id: '4',
        name: '合同管理',
        type: 'link',
        url: 'contract-manage',
        unreadnumber: 2
    },
    {
        id: '5',
        name: '网上报销',
        type: 'link',
        url: 'online-reimbursement',
        unreadnumber: 1
    },
    {
        id: '6',
        name: '手工填报',
        type: 'link',
        url: 'manual-reporting',
        unreadnumber: 0
    }
];

function listClick(event: any) {
    console.log(event);
}
/** 宽度 */
const listNavWidth = 240;
</script>

<template>
    <div class="example-wrapper" style="height: 400px; position: relative">
        <div class="f-page f-page-navigate f-page-is-listnav">
            <div class="f-page-main">
                <f-list-nav
                    :title="'业务支付申请来源1'"
                    :position="'left'"
                    :list-nav-width="listNavWidth"
                >
                    <template #navContent>
                        <f-list-view :data="listViewData" :active-index="3" >
                            <template #content="listItemProps">
                                <div class="f-template-listnav-row" @click="listClick(listItemProps.item)">
                                    <a
                                        class="list-nav-link"
                                        :router-link="listItemProps.item.url"
                                        :style="[
                                            { 'pointer-events': listItemProps.item.disable ? 'none' : 'auto' },
                                            { width: listNavWidth + 'px' }
                                        ]"
                                        :class="[{ 'link-disable': listItemProps.item.disable }, { active: listItemProps.item.active }]"
                                        :title="listItemProps.item.name"
                                    >
                                        <span class="nav-item-name">
                                            {{ listItemProps.item.name }}
                                        </span>
                                        <span class="nav-item-counter" v-if="listItemProps.item.unreadnumber > 0">
                                            {{ listItemProps.item.unreadnumber }}
                                        </span>
                                    </a>
                                </div>
                            </template>
                        </f-list-view>
                    </template>
                </f-list-nav>
                <div class="example-content">
                    <div class="listnav-content">内容展示区</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
.f-page-main {
    flex-direction: row !important;
}
.listnav-example-wrapper {
    background-color: #e7ebef;
    display: flex;
    height: 500px;
    .example-side-nav {
        flex: 0 0 auto;
    }
    .example-content {
        flex: 1 1 auto;
        padding: 10px 10px 10px 4px;
        .listnav-content {
            height: 100%;
            background-color: #fff;
        }
        &.example-content-right {
            padding: 10px 4px 10px 10px;
        }
    }
}
</style>
